<template>
  <div class="table-wrap">
    <div class="page-wrap clearBoth" >
      <slot name="search">

      </slot>
      <Pagination
        class="fr pagination"
        :small="true"
        :currentPage="pagination.currentPage"
        :count="pagination.count"
        :pageSize="pagination.pageSize"
        @turnPage="handleCurrentChange"
        :totalPage="Math.ceil(pagination.count/pagination.pageSize)"
      >
      </Pagination>
    </div>
    <slot name="table" :current="current"></slot>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    name: 'tableData', // 假翻页
    data () {
      return {
        current: [],
        size: [
          {label: this.$t('monitor.page', {num: 10}), value: 10},
          {label: this.$t('monitor.page', {num: 20}), value: 20},
          {label: this.$t('monitor.page', {num: 50}), value: 50},
          {label: this.$t('monitor.page', {num: 100}), value: 100},
          {label: this.$t('monitor.page', {num: 200}), value: 200},
          {label: this.$t('monitor.page', {num: 500}), value: 500}
        ],
        pagination: {
          pageSize: 10,
          count: 0,
          currentPage: 1
        }
      }
    },
    props: {
      allList: {type: Array, default: function () { return [] }}
    },
    computed: {
    },
    components: {
      Pagination
    },
    methods: {
      handleCurrentChange (val) {
        this.pagination.currentPage = val || 1
        let size = this.pagination.pageSize || 10
        let end = Math.min(size * (val), this.pagination.count)
        this.current = this.allList.slice(size * (val - 1), end)
      },
      init (isAdd) {
        this.pagination.count = this.allList.length
        // 最大页数
        let maxPage = Math.ceil(this.pagination.count / this.pagination.pageSize)
        if (this.pagination.currentPage > maxPage) {
          this.pagination.currentPage = maxPage
        }
        let searchPage = this.pagination.currentPage
        if (isAdd) {
          searchPage = 1
        }
        this.handleCurrentChange(searchPage)
      }
    },
    watch: {
      allList () {
        this.init()
      }
    },
    beforeMount () {
      this.init(true)
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../../assets/common.styl'
  .table-wrap
    border-top 1px solid $c-border1
  .page-wrap
    padding 5px 15px 5px 0
    border-left 1px solid $c-border1
    border-right  1px solid $c-border1
  .size-select
    margin-top 6px
    width 100px
</style>
